<script setup lang="ts">
import { get } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
import { ref } from 'vue'
// 定义组件参数
const props = defineProps({
  active: {
    type: String,
    required: true,
  },
})
const couponLists = ref([])
const loading = ref(false)
const finished = ref(false)
const noEmpty = ref(false)

const activeL = ref(props.active)
const page = ref(1)
const limit = 10
function onLoad() {
  queryData()
}
function queryData() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/couponMemberWechatNew/queryMyCouponWechat', {
    limit: limit,
    page: page.value,
    status: activeL.value,
  })
    .then((res) => {
      if (res.code === 0) {
        // 正常返回数据
        loading.value = false
        noEmpty.value = false
        res.data.forEach((item) => {
          couponLists.value.push({
            ...item,
          })
        })
        if (page.value == res.totalPage) {
          loading.value = true
          finished.value = true
          noEmpty.value = false
        } else {
          page.value++
        }
      } else {
        //其他返回数据情况
        if (res.count > 0) {
          //有数据情况
          if (res.code == 201) {
            loading.value = true
            finished.value = true
            noEmpty.value = false
          }
        } else {
          //无数据情况
          loading.value = true
          finished.value = true
          noEmpty.value = true
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
const emit = defineEmits(['sayHello'])
function sayHello(couponDetail) {
  emit('sayHello', couponDetail)
}
</script>
<template>
  <van-empty
    v-if="noEmpty == true"
    :image="VUE_APP_BASE_API + '/images/vue/noData.png'"
    image-size="100"
    description="暂无数据"
  />
  <van-list
    v-else
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="myCouponItem"
      @click="sayHello(couponDetail)"
      v-for="couponDetail in couponLists"
      :key="couponDetail.dbid"
    >
      <div class="leftText">
        <h2 class="couponPrice">
          {{ couponDetail.moneyOrRabatt }}{{ couponDetail.type == 1 ? '折' : '元' }}
        </h2>
        <p class="couponType">{{ couponDetail.typeName }}</p>
      </div>
      <div class="cneterText">
        <h2>{{ couponDetail.name }}</h2>
        <div style="">{{ couponDetail.timeLimit }}</div>
      </div>
      <div class="rightText">
        <div class="button useButton" v-if="couponDetail.status == 'waitingUse'">可使用</div>
        <div class="button usedButton" v-if="couponDetail.status == 'useless'">已使用</div>
        <div class="button overTimeButton" v-if="couponDetail.status == 'disabled'">已过期</div>
      </div>
    </div>
    <br />
  </van-list>
</template>
<script lang="ts" setup></script>
<style lang="css" scoped></style>
